<template>
	<view class="missrivertop3">
		<view class="headers_top">
			<view class="" style="padding: 110rpx 20rpx 20rpx 20rpx;height: 69rpx;">
				<!-- <image :src="getImgUrl('/img/missimg/xiangzuojiantou.svg')" style="width: 56rpx;height: 30rpx;"
					@tap="Return">
				</image> -->
				<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Return"></uni-icons>
			</view>
			<view class="ft_img">
				<image class="topimage" :src="sinianimg" mode=""></image>
			</view>
			<!-- 	<view class="centertext">
				<view class="" style="position: relative;">
					<textarea class="textarea" maxlength='90' @input="descInput" v-model="txt" placeholder="请输入您的思念和祝福…"
						style="background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/missimg/biaoqian.png');"></textarea>
					<view class="demnum">
						{{demnum}}/90
					</view>
				</view>
			</view> -->

			<view class="centent_text">
				<textares></textares>
			</view>
		</view>
		<view class="Info_font">
			思念会在思念河展示，接收大家的祝福哦～
		</view>
		<view style="height: 300rpx;">
			<view class="misssubmit" @click="misssubmit">
			写好了
		</view>
		</view>

		<view class="modal" v-if="modals">
			<view class="titles">
				确认放置思念灯吗
			</view>
			<view class="content">
				提交后不可再更改哦～是否确认？
			</view>
			<view style="display: flex;justify-content: space-around;margin-top: 35px;">
				<view class="black" @click="Black">
					返回编辑
				</view>
				<view class="ok" @click="Ok">
					确认
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgtype" :message="msgs" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		imgBaseUrl
	} from '../../../../utils/baseUrl.js'
	import {
		busTreviRiveradd
	} from '../../../../utils/api.js'
	import textares from '../components/textares.vue'
	export default {
		components: {
			textares
		},
		data() {
			return {
				bqimg: imgBaseUrl + '/img/missimg/biaoqian.png',
				modals: false,
				sinianimg: imgBaseUrl + '/img/missimg/sinian.png',
				txt: '',
				messageText: '',
				demnum: 0,
				msgtype:'',
				msgs:'',
				isucess:true
			};
		},
		created() {
			let that = this
			this.$eventBus.$on('ids', function(id) {
				that.id = id
			})
		},
		mounted() {


		},
		methods: {
			misssubmit() {

				if (this.$children[1].txt !== '') {
					this.modals = true
				} else {
					uni.showToast({
						title: '请输入内容',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 1000
					})
				}
			},
			Black() {
				this.modals = false
			},
			async Ok() {
			if (this.isucess) {
				this.isucess = false
				let _this = this
				setTimeout(() => {
					_this.isucess = true
				}, 1000)
				
				try{
					if (this.$children[1].txt != '') {
						const result = await busTreviRiveradd({
							content: this.$children[1].txt,
							dictItem: this.id
						})
						if(result.code == 200)
						{
							// this.$refs.message.open()
							// this.msgtype = 'sucess'
							// this.msgs = '许愿成功!'
							uni.showToast({
								title: '放灯成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 1000
							})
						
								this.modals = false
								this.$emit('ok')
						
						}
					}
				}catch(e){
					//TODO handle the exception
				}
				}
				
			},
			Return() {
				this.$emit('return')
			},
			descInput(event) {
				this.demnum = event.target.value.length;
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
		}
	}
</script>

<style lang="less" scoped>
	.missrivertop3 {
		.headers_top {
			height: 78vh;
		}

		display: flex;
		justify-content: space-between;
		flex-direction: column;

		.ft_img {
			padding-top: 250rpx;
			height: 101rpx;
			display: flex;
			justify-content: center;
			// padding-bottom: 40rpx
		}

		.topimage {
			width: 336rpx;
			height: 56rpx;
			// position: absolute;
			// top: 30%;
			// left: 50%;
			// transform: translateX(-50%);
		}

		.centertext {
			width: 100%;
			height: 600rpx;
			margin-top: 500rpx;
			display: flex;
			justify-content: center;

			.demnum {
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6A3C16;
				position: absolute;
				bottom: 147rpx;
				right: 100rpx;
			}
		}

		.misssubmit {
			text-align: center;
			width: 356rpx;
			height: 100rpx;
			color: #60371A;
			font-family: PingFang SC-Bold, PingFang SC;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			opacity: 1;
			margin:42rpx auto;
		}

		.Info_font {
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			// padding-bottom: 31rpx;
		}

		.centent_text {
			display: flex;
			justify-content: center;
		}

		.textarea {
			// background-color: #ee9e76;
			background-size: 100% 100%;
			width: 470rpx;
			padding: 98rpx 99rpx 108rpx 99rpx;
			height: 289rpx;
			line-height: 52rpx;
			font-size: 24rpx;
			color: #6A3C16;
			font-weight: 400;
			font-family: PingFang SC-Regular, PingFang SC;

		}

		.modal {
			position: absolute;
			top: 48%;
			left: 7%;
			width: 640rpx;
			height: 360rpx;
			background: #000000;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 0.8;
			border: 2rpx solid #F1F1F1 !important;
			border-image: linear-gradient(90deg, rgba(252, 232, 202, 1), rgba(0, 0, 0, 1), rgba(252, 232, 202, 1)) 1 1;
			z-index: 10000;

			.titles {
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 100rpx;
			}

			.content {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
			}

			.black {
				text-align: center;
				color: #FFFFFF;
				width: 115px;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				border: 2rpx solid #FFFFFF;

			}

			.ok {
				text-align: center;
				width: 222rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
			}
		}

	}
</style>